{% extends 'base.html' %}

{% block body %}

<!-- ===== Alert Messages ===== -->
{% for message in messages %}
<div class="alert alert-success alert-dismissible fade show shadow-sm my-3 mx-3" role="alert">
    <strong>{{ message }}</strong>
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
{% endfor %}

<!-- ===== Profile Section ===== -->
<section class="py-5 profile-section">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-md-6">
        <div class="card shadow-lg border-0 rounded-4 overflow-hidden">
          
          <!-- Card Header -->
          <div class="card-header bg-success text-white text-center py-4">
            <h3 class="fw-bold mb-0">
              <i class="bi bi-person-circle"></i> Profile
            </h3>
            <p class="small text-light mt-1">Welcome, {{ request.user.first_name }}!</p>
          </div>

          <!-- Card Body -->
          <div class="card-body bg-light p-4">
            <table class="table table-borderless align-middle mb-0">
              <tbody>
                <tr class="profile-row">
                  <th><i class="bi bi-person-fill text-success me-2"></i>First Name</th>
                  <td class="text-muted">{{ request.user.first_name }}</td>
                </tr>
                <tr class="profile-row">
                  <th><i class="bi bi-person-fill text-success me-2"></i>Last Name</th>
                  <td class="text-muted">{{ request.user.last_name }}</td>
                </tr>
                <tr class="profile-row">
                  <th><i class="bi bi-telephone-fill text-success me-2"></i>Phone Number</th>
                  <td class="text-muted">{{ request.user.phone }}</td>
                </tr>
                <tr class="profile-row">
                  <th><i class="bi bi-calendar-check text-success me-2"></i>Total Bookings</th>
                  <td class="fw-bold text-success">{{ request.user.booking_count }}</td>
                </tr>
              </tbody>
            </table>
          </div>

          <!-- Card Footer -->
          <div class="card-footer bg-white text-center py-3">
            <a href="/booking" class="btn btn-success px-4 rounded-pill shadow-sm me-2">
              <i class="bi bi-plus-circle"></i> New Booking
            </a>
            <a href="/history" class="btn btn-outline-success px-4 rounded-pill shadow-sm">
              <i class="bi bi-clock-history"></i> My Bookings
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- ===== Custom CSS ===== -->
<style>
  body {
    background: linear-gradient(135deg, #e8f5e9, #ffffff);
  }

  .card {
    border-radius: 20px;
    transition: all 0.3s ease-in-out;
  }

  .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
  }

  .card-header {
    border-bottom: none;
  }

  .table th {
    width: 50%;
    font-weight: 600;
    color: #333;
  }

  .profile-row {
    border-bottom: 1px solid #ddd;
    padding: 0.75rem 0;
  }

  .table td {
    color: #555;
  }

  .card-footer {
    border-top: 1px solid #f1f1f1;
  }

  .btn-success {
    font-weight: 600;
  }

  .btn-outline-success:hover {
    background-color: #28a745;
    color: #fff;
  }

  @media (max-width: 768px) {
    .card {
      margin: 0 10px;
    }
    .btn {
      display: block;
      width: 100%;
      margin-bottom: 10px;
    }
  }
</style>

{% endblock body %}